<template>
  <div class="header-panel">
    <div class="header">
      <div class="header-link" @click="gotoWorkStand"></div>
      <div class="header-btns">
        <div class="header-btn" v-for="(item, index) in btns" :key="index" @click="showPanel(item)">
          <img :src="item.target === active ? item.activeImg : item.img" width="220px" height="46px" />
        </div>
      </div>
      <div class="header-data-time" v-if="datePickerShow">
        <div class="header-data-time-title">数据时间</div>
        <el-date-picker
          v-model="dateValue"
          class="header-data-time-picker"
          type="datetimerange"
          size="small"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          @change="dateChange"
        >
        </el-date-picker>
      </div>
      <TimeComponent />
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { Debounce } from '~/assets/modules/debounce'
import TimeComponent from './CTimeComponent.vue'
import exportVue from '@/assets/modules/exportVue'
@Component({
  name: 'HeaderCompoent',
  components: {
    TimeComponent
  }
})
export default class extends Vue {
  get datePickerShow() {
    return this.$store.getters['panel/datePickerShow']
  }

  active: string = 'grid'
  dateValue = ''

  btns: any[] = [
    {
      name: '楼盘信息',
      target: 'floor',
      img: require('../assets/images/panels/toubuloupanxinxiqian.png'),
      activeImg: require('../assets/images/panels/toubuloupanxinxihou.png')
    },
    {
      name: '网格信息',
      target: 'grid',
      img: require('../assets/images/panels/toubuwanggexinxiqian.png'),
      activeImg: require('../assets/images/panels/toubuwanggexinxihou.png')
    }
  ]
  pickOptions = {
    disabledDate: (month: any) => {
      return month.getMonth() > new Date().getMonth()
    }
  }
  created() {}
  mounted() {
    this.floorGoGrid()
  }
  @Debounce(1000)
  showPanel(item: any) {
    const target = item.target
    this.active = target
    if (this.active == 'grid') {
      this.dateValue = ''
      this.$store.commit('panelData/setDatePickerValue', this.dateValue)
      this.$store.commit('panel/setLeftPanelShow', true)
      this.$store.commit('panel/setRightPanelShow', true)
      this.$store.commit('panel/setBottomPanelShow', false)
      this.$store.commit('panel/setDatePickerShow', true)
    } else {
      // this.$store.commit("panel/setLeftPanelShow", false);
      this.$store.commit('panel/setRightPanelShow', false)
      this.$store.commit('panel/setBottomPanelShow', false)
      this.$store.commit('panel/setDatePickerShow', false)
    }
    this.$store.commit('panel/setLeftPanel', target)
    this.$store.commit('panel/setRightPanel', target)
    this.$store.commit('panel/setBottomPanel', target)
    this.$store.commit('handler/setTarget', target + '-handler')
    this.$store.commit('view/setRestoration', true)
    this.$store.commit('panel/setDialogShow', false)
  }
  dateChange() {
    debugger
    this.$store.commit('panelData/setDatePickerValue', this.dateValue)
    this.$store.commit('panel/setLeftPanelShow', false)
    this.$store.commit('panel/setRightPanelShow', false)
    this.$store.commit('panel/setDialogShow', false)
    this.$nextTick(() => {
      this.$store.commit('panel/setLeftPanelShow', true)
      this.$store.commit('panel/setRightPanelShow', true)
    })
  }
  floorGoGrid() {
    exportVue.$on('floor-go-grid', () => {
      this.showPanel({ target: 'grid' })
    })
  }
  gotoWorkStand() {
    const win: any = window
    window.location.replace(win.user.wordStandUrl)
  }
}
</script>

<style lang="scss" scoped>
.header-panel {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 93px;
  width: 1920px;
  background: #001022;
}
.header {
  height: 73px;
  width: 1920px;
  display: flex;
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../assets/images/panels/toububeijing.png);
  & > * {
    pointer-events: auto;
  }
  .header-link {
    width: 580px;
    height: 73px;
  }
  .header-btns {
    display: flex;
    width: 440px;
    height: 46px;
    margin: 27px 0 0 40px;
    .header-btn {
      cursor: pointer;
      width: 220px;
      height: 73px;
      margin-left: -20px;
    }
  }
  .header-data-time {
    display: flex;
    width: 500px;
    height: 28px;
    margin: 35px 0 0 20px;
    font-size: 16px;
    font-family: Alibaba_PuHuiTi_2_65_Medium;
    font-style: italic;
    line-height: 30px;
    color: #1658a0;
    .header-data-time-title{
      margin-right: 16px;
    }
   

    // .header-data-time-picker {
    //   margin: 0 10px;
    //   width: 129px;
    // }
  }
}
.el-date-editor {
  border: solid 1px #1658a0 !important;
}
</style>
<style lang="scss">
.header-data-time-picker {
  .el-input__inner {
    background-color: #001022;
    border-radius: 4px;
    border: solid 1px #1658a0;
    font-family: AlibabaPuHuiTi_2_65_Medium;
    font-size: 16px;
    line-height: 30px;
    color: #ffffff;
    padding-left: 10px;
  }
  .el-input__prefix {
    left: 95px;
    font-size: 16px;
  }
}
.el-range-editor.el-input__inner {
  background-color: #001022;
}
.el-date-editor .el-range__icon{
  color: #ffffff;
}
.el-range-editor--small .el-range-input{
  color: #ffffff;
}
.el-date-editor .el-range-separator{
  padding:0px;
  color:#ffffff;
}
.el-date-range-picker__time-header>.el-icon-arrow-right{
  color:#ffffff;
}
.el-range-input {
  background-color: #001022;
}
.el-picker-panel {
  color: #ffffff;
  background-color: #1d345a;
  border:none;
  .el-picker-panel__body-wrapper{
    padding: 10px;
  }
  .el-input__inner {
    // background-color: #1d345a;
    // background-color: #001022;
    background-color: #1d345a;

    border: 1px solid #1658a0;
  }
  .el-input.is-disabled .el-input__inner{
    background-color: #1d345a;
    border-color: #1658a0;
  }
  .el-date-table td.disabled div {
    background-color: #1d345a;
  }
  .el-date-table td.in-range div{
    background-color:#324c89;
  }
  .el-date-table th {
    color:#ffffff;
 
  }
  .el-picker-panel__footer {
    margin: 10px;
    padding-top: 10px;
    background-color: #1d345a;
  }
  .el-date-range-picker__time-header{
    border-bottom: 1px solid #1658a0;
  }
  .el-date-range-picker__content.is-left {
    border-right: 1px solid #1658a0;
  }
  .el-picker-panel__footer{
    border-top: 1px solid #1658a0;
  }
  .el-input__inner{
    color:#ffffff
  }
  .popper__arrow{
      border-bottom:none;

  }
  .popper__arrow::after{
      border-bottom-color: #1d345a !important;
  }
}
.el-date-editor--datetimerange.el-input, .el-date-editor--datetimerange.el-input__inner{
  width: 360px;
}
.el-date-range-picker__header{
  .el-picker-panel__icon-btn {
    color: #ffffff;
  }
}
</style>
